<template>
  <div class="login-page flex">
    <div class="login-page-left flex">
      <div class="title flex">登录后推荐更懂你的笔记</div>
      <img class="logo" src="@/assets/images/logo.png" alt="" />

      <div class="qrcode flex">
        <img src="@/assets/images/QR.png" alt="" />
      </div>

      <div class="description flex">
        可用
        <svg
          t="1736759528059"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1694"
          width="200"
          height="200"
        >
          <path
            d="M960 797.248V226.784C960 137.248 886.752 64 797.216 64H226.784C137.248 64 64 137.248 64 226.784v570.464c0 88.64 71.808 161.344 160.16 162.752h575.68c88.32-1.408 160.16-74.08 160.16-162.752"
            fill="#FF2442"
            p-id="1695"
          ></path>
          <path
            d="M700.544 384h50.4v18.048c0 1.44 0.704 2.112 2.08 2.08 29.888-0.896 60 0.064 75.424 30.72 9.184 18.176 7.296 45.824 6.784 67.52-0.032 1.28 0.576 1.984 1.792 2.112 3.52 0.32 6.944 0.64 10.272 1.056 59.424 7.136 47.68 63.168 47.872 107.2 0.096 15.36-1.632 26.592-5.12 33.76-7.36 14.848-20.544 23.36-39.552 25.472H813.44l-18.944-43.968a1.44 1.44 0 0 1 0.096-1.344 1.376 1.376 0 0 1 1.152-0.64l40.192-0.032c2.24 0 4.352-0.96 5.888-2.624a8.896 8.896 0 0 0 2.368-6.176c-0.192-13.44-0.288-26.848-0.224-40.256 0-12.064-5.696-18.24-17.184-18.56-12.992-0.32-37.6-0.32-73.856 0.064-1.28 0-1.92 0.704-1.92 2.08l-0.192 111.456H700.48l-0.16-111.936a1.984 1.984 0 0 0-1.952-2.048h-47.04a2.24 2.24 0 0 1-2.176-2.24l0.064-48.704c0-1.632 0.768-2.464 2.304-2.464l46.496 0.096a2.208 2.208 0 0 0 1.6-0.704 2.432 2.432 0 0 0 0.64-1.664v-42.112a2.784 2.784 0 0 0-2.688-2.848l-28.704 0.128c-1.504 0-2.24-0.8-2.24-2.368l-0.096-48.96c0-1.44 0.64-2.144 2.08-2.144h29.728c1.28 0 1.92-0.64 1.92-2.016l0.32-17.984z m52.192 120.736l31.264-0.064c0.512 0 0.992-0.224 1.344-0.608a2.016 2.016 0 0 0 0.544-1.408l-0.16-39.136c0-3.072-2.24-5.568-4.96-5.568l-25.088 0.064a4.704 4.704 0 0 0-3.52 1.664 5.984 5.984 0 0 0-1.44 4l0.16 39.136c0 1.088 0.864 1.92 1.856 1.92zM429.344 508.256c-12.16 0.224-34.144 3.616-38.944-12.032-2.912-9.344 3.68-22.368 7.68-31.488 11.392-25.952 22.56-52 33.536-78.144 0.448-1.056 1.216-1.6 2.304-1.6h48.096c0.416 0 0.768 0.224 0.96 0.576a1.28 1.28 0 0 1 0.128 1.152l-27.84 65.056c-0.64 1.504-0.48 3.2 0.352 4.608a4.544 4.544 0 0 0 3.84 2.176h41.216c0.512 0 0.96 0.256 1.248 0.672 0.256 0.448 0.32 0.96 0.096 1.44-11.904 27.744-23.776 55.296-35.616 82.656-1.184 2.72-1.696 4.736-1.504 6.016 0.416 2.784 1.984 4.192 4.672 4.224l26.08 0.16c1.504 0.032 1.984 0.768 1.376 2.24l-16.864 39.68a3.328 3.328 0 0 1-3.2 2.208c-26.496 0.32-45.024 0.32-55.584-0.16-17.472-0.8-21.76-16.096-14.976-31.872l23.968-55.936a1.216 1.216 0 0 0-0.096-1.088 1.088 1.088 0 0 0-0.96-0.544zM229.504 671.968h-18.88l-18.496-43.424a1.408 1.408 0 0 1 0.096-1.312 1.28 1.28 0 0 1 1.088-0.64l26.112-0.064a6.112 6.112 0 0 0 5.984-6.24l0.704-230.304a2.24 2.24 0 0 1 2.208-2.304h44.928c2.112 0 3.168 1.12 3.2 3.328 0.192 77.984 0.192 154.624 0 229.952-0.128 30.912-14.464 52.032-46.944 51.008z"
            fill="#FFFFFF"
            p-id="1696"
          ></path>
          <path
            d="M650.944 671.968h-170.432l22.848-51.52a3.04 3.04 0 0 1 2.976-1.952l41.728 0.064c1.472 0 2.24-0.736 2.24-2.24v-156.32c0-1.344-0.64-2.016-1.92-2.016l-27.68-0.032c-1.248 0-2.24-1.088-2.24-2.4v-50.144c0-0.768 0.576-1.408 1.312-1.408h112.832c1.408 0 2.08 0.736 2.08 2.208l0.064 49.6c0 1.44-0.704 2.176-2.112 2.176h-27.904c-1.28 0-1.92 0.672-1.92 2.016v156.224c0 1.504 0.736 2.24 2.144 2.24l44.224 0.096c1.216 0 1.824 0.64 1.824 1.92L650.944 672zM853.92 408.864c34.816-23.936 59.328 37.088 21.184 47.552-6.208 1.728-16.096 1.824-29.632 0.32-1.216-0.128-1.792-0.8-1.792-2.08-0.192-14.4-3.04-36.672 10.24-45.76zM373.312 588.288l-23.04 53.664c-2.08 4.8-4.352 4.896-6.88 0.384-16.96-30.656-22.72-55.68-26.048-93.792-2.56-29.6-4.768-59.2-6.688-88.864-0.064-1.344 0.544-2.016 1.824-2.016l46.688 0.032c1.312 0 2.048 0.704 2.144 2.048 2.4 34.496 4.928 68.896 7.552 103.2 0.672 8.832 2.176 16.16 4.48 21.984a4.16 4.16 0 0 1-0.032 3.36zM128 586.304v-2.208a22.592 22.592 0 0 0 4.16-10.112c3.456-38.08 6.272-76.128 8.48-114.208 0.096-1.184 0.672-1.792 1.792-1.792h47.68c0.416 0 0.832 0.192 1.152 0.544 0.288 0.32 0.448 0.768 0.416 1.216a6351.04 6351.04 0 0 1-8.416 105.184c-2.24 25.44-10.368 59.488-27.36 80.128-1.088 1.312-2.016 1.184-2.72-0.416L128 586.304zM453.184 671.968h-69.056l-8.8-3.488c-1.248-0.48-1.6-1.344-1.024-2.592l21.664-49.6c0.64-1.44 1.664-1.984 3.136-1.6 23.68 6.432 51.104 3.776 75.328 3.872 1.504 0.032 1.92 0.768 1.28 2.176l-22.528 51.2z"
            fill="#FFFFFF"
            p-id="1697"
          ></path>
        </svg>
        <span class="blod">小红书&nbsp;</span> 或
        <svg
          t="1736759603395"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1853"
          width="200"
          height="200"
        >
          <path
            d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
            fill="#09BB07"
            p-id="1854"
          ></path>
        </svg>
        <span class="blod">微信&nbsp;</span>扫码
      </div>

      <div class="footer flex">
        <svg
          t="1736760150638"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1225"
          width="20"
          height="20"
        >
          <path
            d="M974.93333334 554.66666666C981.33333334 548.26666666 981.33333334 535.46666666 981.33333334 522.66666666s0-25.6-6.4-32c-6.4-12.8-19.2-19.2-25.60000001-25.59999999L219.73333334 49.06666666c-19.2-12.8-44.8-12.8-64 0-12.8 6.4-12.8 12.8-19.2 25.6s-6.4 19.2-6.4 32l0 819.2c0 12.8 0 25.6 6.40000001 32 6.4 12.8 12.8 19.2 19.19999999 25.59999999 19.2 12.8 44.8 12.8 64 1e-8L949.33333334 580.26666666C955.73333334 573.86666666 968.53333334 567.46666666 974.93333334 554.66666666z"
            fill="#c1c1c1"
            p-id="1226"
          ></path>
        </svg>
        小红书如何扫码
      </div>
    </div>

    <div class="login-page-right flex">
      <div class="title">手机号登录</div>
      <div class="form flex">
        <el-input class="input-item" v-model="phone" placeholder="输入手机号">
          <template #prefix>
            <span class="country-code">+86</span>
          </template>
        </el-input>

        <el-input class="input-item" v-model="code" placeholder="输入验证码">
          <template #suffix>
            <span class="code-btn">获取验证码</span>
          </template>
        </el-input>
      </div>
      <div class="login-btn flex" @click="loginFun">登录</div>
      <div class="flex">
        <el-checkbox v-model="agreement" label="" />
        <div>
          我已阅读并同意<a href="#">《用户协议》</a><a href="#">《隐私政策》</a
          ><a href="#">《儿童/青少年个人信息保护规则》</a>
        </div>
      </div>
      <div class="footer">新用户可直接登录</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import emmiter from "@/utils/event-bus.js";
const phone = ref("");
const code = ref("");
const agreement = ref(false);

const loginFun = () => {
  if (!phone.value || !code.value) {
    ElMessage("请输入手机号和验证码");
    return;
  } else if (!agreement.value) {
    ElMessage("请先阅读并同意协议");
    return;
  }

  if (phone.value === "123456" && code.value === "123456") {
    localStorage.setItem("user", phone.value);
    emmiter.emit("loginShow", false);
    ElMessage({
      message: "登录成功",
      type: "success",
    });
    window.location.reload();
  } else {
    ElMessage("手机号或验证码错误");
  }
};
</script>


<style lang="scss" scoped>
.login-page {
  width: 100%;
  .login-page-left {
    flex: 1;
    flex-direction: column;
    align-items: center;
    .title {
      height: 48px;
      padding: 0 20px;
      background: var(--color-tinted-blue);
      color: var(--color-blue);
      border-radius: 999px;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 20px;
      justify-content: center;
      align-items: center;
    }

    .logo {
      height: 64px;
      -webkit-user-select: none;
      user-select: none;
      pointer-events: none;
    }

    .qrcode {
      position: relative;
      justify-content: center;
      align-items: center;
      width: 160px;
      height: 160px;
      border: 2px solid var(--color-shadow-border);
      border-radius: 12px;
      box-shadow: var(--elevation-high-shadow);
      background: var(--color-white);

      img {
        height: 128px;
        width: 128px;
      }
    }

    .description {
      color: var(--color-primary-label);
      font-weight: 400;
      font-size: 16px;
      margin-top: 16px;
      align-items: center;
    }

    svg {
      height: 16px;
      width: 16px;
      margin: 0 5px;
    }
  }

  .login-page-right {
    flex: 1;
    flex-direction: column;
    align-items: center;
    .title {
      font-size: 18px;
      color: var(--color-primary-label);
      font-weight: 600;
      height: 24px;
    }

    .form {
      flex-direction: column;
      margin-top: 20px;
      .input-item {
        font-size: 16px;
        width: 350px;
        height: 56px;
        caret-color: var(--color-red);
        color: var(--color-primary-label);
        margin: 16px;
      }

      .country-code {
        display: inline-block;
        border-right: 1px solid #e4e4e4;
        width: 29px;
        font-weight: 400;
        padding-right: 20px;
        color: var(--color-primary-label);
      }

      .code-btn {
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        color: var(--color-red);
        opacity: 0.5;
      }
    }

    .login-btn {
      width: 320px;
      cursor: pointer;
      justify-content: center;
      background-color: #ff2e4d;
      color: #fff;
      padding: 16px;
      border-radius: 999px;
      font-size: 16px;
      font-weight: 600;
      margin-top: 16px;
      margin-bottom: 8px;
    }
  }

  .footer {
    margin: 50px auto 20px auto;
    align-items: center;
  }
}

::v-deep(.el-input) {
  --el-input-border-color: transparent;
  --el-input-focus-border-color: transparent;
  --el-input-hover-border-color: transparent;
}

::v-deep(.el-input__inner) {
  color: var(--color-primary-label);
}
::v-deep .el-input__wrapper {
  border-radius: 999px;
  padding-left: 16px;
  background: var(--color-active-background);
  border: none;
}

::v-deep .el-input__wrapper.is-focus {
  box-shadow: none;
}

::v-deep .el-input__wrapper.hover {
  box-shadow: none;
}
</style>